// setInterval(function() {
//     getMessageSession();
// }, 3000);


//通过session获取主页用户姓名
getUserName();
function getUserName(){
    $.ajax({
        type:"get",
        url:"/user/getName",
        success: function (result){
            if(result && result.id!=0){
                let userDiv = document.querySelector('.main .left .user');
                userDiv.innerHTML = result.username;
            }else {
                alert("请先登录用户!");
                location.href = "login.html";
            }
        }
    });
}


/////////////////////////////////////////////
//好友搜索功能 start
/////////////////////////////////////////////

//给好友搜索按钮加上功能
let searchButton = document.querySelector(".left .search button");
searchButton.onclick = function (){
    //let userDiv = document.querySelector('.main .left .user');
    //获取用户搜索框值
    let searchContent = document.querySelector("#search-input").value;
    if(searchContent.length == 0){
        return ;
    }
    searchFriends(searchContent);
}

//好友搜索触发
function searchFriends(searchContent){
    //拿取好友搜索展示框
    let SearchResultsShow = document.querySelector(".right .message-show");
    SearchResultsShow.innerHTML = "";
    //拿取好友搜索头部框
    let titleDiv = document.querySelector(".right .title");
    titleDiv.innerHTML = "搜索用户结果";
    $.ajax({
        type:"get",
        url:"/friend/searchFriends?userName="+searchContent,
        success:function (friends){
            if(friends == ""){
                alert("用户不存在!");
            }
            //查找搜索用户是否是好友
            for (let friend of friends){
                $.ajax({
                   type:"post",
                   url:"/friend/judgfriend?friendId="+friend.id,
                    success:function (ret){
                       if(ret){
                           //跳转好友会话div
                           addJumpSession(SearchResultsShow,friend);
                       }else {
                           //添加用户好友div
                           addSearchResults(SearchResultsShow,friend);
                       }
                    }
                });
            }
            //scrollBottom(SearchResultsShow);
        }
    });
}

//跳转好友会话div
function addJumpSession(messageShowDiv, friend){
    // 创建会话模块的容器
    let chatSessionDiv = document.createElement("div");
    chatSessionDiv.className = "chat-session-module";

    // 构建跳转到会话的模块
    chatSessionDiv.innerHTML = `
        <div class="chat-session-box">
            <div class="friend-info">
                <span class="username">${friend.username}</span>
            </div>
            <button id="${friend.id}chat-btn" class="chat-btn">
                <i class="fa fa-comment"></i> 进入聊天
            </button>
        </div>
    `;

    // 添加到消息展示区
    messageShowDiv.appendChild(chatSessionDiv);
    // 绑定进入聊天按钮事件
    const chatBtn = chatSessionDiv.querySelector(`[id="${friend.id}chat-btn"]`);

    chatBtn.addEventListener('click', () => {
        clickFriend(friend);
    });
}

// //表示一条消息
// let messageDiv = document.createElement("div");
// //获取用户自己姓名
// let selfName = document.querySelector(".left .user").innerHTML;
// if(message.fromName == selfName){
//     messageDiv.className = "message message-right";
// }else {
//     messageDiv.className = "message message-left";
// }
// //向消息中添加发送者和消息内容
// messageDiv.innerHTML = '<div class="box">'
//     + '<h4>' + message.fromName + '</h4>'
//     + '<p>' + message.content + '</p>'
//     + '</div>';
// messageShowDiv.appendChild(messageDiv);

//添加用户好友div
function addSearchResults(SearchResultsShow,friend){
    let addFriendDiv = document.createElement("div");
    //添加好友申请模块
    addFriendDiv.innerHTML = `
        <div class="add-friend-box">
            <div class="friend-info">
                <span class="username">${friend.username}</span>
            </div>
            <div class="form-group">
                <textarea id="${friend.id}add-reason" rows="2" placeholder="输入添加原因（选填，超过10个字将无法显示）"></textarea>
            </div>
            <button id="${friend.id}send-request-btn" class="send-btn">发送请求</button>
        </div>
    `;
    SearchResultsShow.appendChild(addFriendDiv);

    //获取按钮
    //let sendBtnString = friend.id+"send-request-btn";
    const sendBtn = addFriendDiv.querySelector(`[id="${friend.id}send-request-btn"]`);

    //点击按钮发送好友请求
    sendBtn.addEventListener('click', () => {
        //let addReasonString = friend.id+"add-reason";
        const addReason = addFriendDiv.querySelector(`[id="${friend.id}add-reason"]`).value;

        // 发送好友请求
        let req = {
            type : "addFriend",
            friendId : friend.id,
            content : addReason,
        }
        console.log("[webSocket]send 好友请求"+req);
        req = JSON.stringify(req);
        webSocket.send(req);
        // 显示成功提示并移除表单
        sendBtn.textContent = "已发送";
        sendBtn.disabled = true;

        // setTimeout(() => {
        //     alert(`已向 ${friendUsername} 发送好友请求`);
        //     addFriendDiv.remove();
        // }, 1000);
    });
}
/////////////////////////////////////////////
//好友搜索功能 end
/////////////////////////////////////////////



///////////////////////////////////////////////
//WebSocket发送消息 start
///////////////////////////////////////////////

function initSendButton(){
    let sendButton = document.querySelector(".right .ctrl button");
    let messageInput = document.querySelector(".right .message-input");

    sendButton.onclick = function (){
        if(!messageInput.value){
            return;
        }
        let selectedLi = document.querySelector("#session-list .selected");
        if(selectedLi == null){
            return ;
        }
        let sessionId = selectedLi.getAttribute("message-session-id");
        let req = {
            type : "message",
            sessionId : sessionId,
            content : messageInput.value
        };
        console.log("[websocket] send 消息:"+req.content);
        req = JSON.stringify(req);
        webSocket.send(req);
        messageInput.value = "";
    }
}

initSendButton();

///////////////////////////////////////////////
//WebSocket接受消息
///////////////////////////////////////////////

//let webSocket = new WebSocket("ws://127.0.0.1:8080/WebSocket");
let webSocket = new WebSocket("ws://"+location.host+"/WebSocket");


webSocket.onopen = function (){
    console.log("连接成功");
}

webSocket.onmessage = function (e){
    console.log("收到消息 ："+e.data);
    let resp = JSON.parse(e.data);
    if(resp.type == "message"){
        handleMessage(resp);
    }else if(resp.type == "addFriend"){
        handleAddFriend(resp);
    }else{
        console.log("resp参数不对");
    }
}

webSocket.onclose = function (){
    console.log("连接断开");
}

webSocket.onerror = function (){
    // $.ajax({
    //     type:"get",
    //     url:"/friend/setState",
    //     success:function (ret){
    //         if(ret){
    //             console.log("修改好友申请成功 onerror");
    //         }
    //     }
    // });
    console.log("连接异常，断开");
}

//上线判断是否有好友申请
function inithandleAddFriend(){
    $.ajax({
        type:"get",
        url:"/friend/getAddFriend",
        success: function (respList){
            if(respList == ""){
                return ;
            }
            for (let resp of respList){
                handleAddFriend(resp);
            }
        }
    });
}

//好友申请处理
function handleAddFriend(resp){
    console.log("handleAddFriend执行了");

    let li = document.createElement('li');
    li.className = 'friend-request';
    //li.dataset.fromId = resp.fromId; // 存储fromId作为数据属性

    //截断resp.content避免请求消息过长
    if(resp.content.length > 10){
        resp.content = resp.content.substring(0,11);
    }
    // 修正：正确使用模板字符串嵌入变量
    li.innerHTML = `
        <div class="request-content">
            <div class="request-info">
                <h4 class="username">${resp.fromName}</h4>
                <p class="reason">${resp.content}</p>
            </div>
        </div>
        <div class="request-actions">
            <button class="accept-btn" data-from-id="${resp.fromId}">同意</button>
            <button class="reject-btn" data-from-id="${resp.fromId}">拒绝</button>
        </div>
    `;

    let sessionUl = document.querySelector("#session-list");
    sessionUl.insertBefore(li,sessionUl.children[0]);

    // 修正：使用类选择器和正确的模板字符串
    const acButton = li.querySelector('.accept-btn');
    const rejButton = li.querySelector('.reject-btn');

    // 修正：使用箭头函数闭包捕获resp变量
    acButton.addEventListener('click', () => {
        addResult(1, resp); // 直接使用外部的resp变量
        li.remove();
    });

    rejButton.addEventListener('click', () => {
        addResult(0, resp); // 直接使用外部的resp变量
        li.remove();
    });
}

//添加好友结果
function addResult(val,resp){
    if(val == 0){
        $.ajax({
            type:"post",
            url:"/friend/reject?fromId="+resp.fromId,
            success:function (ret){
                if(ret){
                    alert("拒绝成功!");
                }
            }
        });
    }else {
        $.ajax({
           type:"post",
           url:"/friend/add?fromId="+resp.fromId,
            success:function (ret){
               if(ret){
                   alert("添加成功!")
               }else {
                   alert("添加失败!")
               }
               getFriendList();
               getMessageSession();
            }
        });
    }
}

//处理转发来的消息
function handleMessage(resp){
    console.log("handleMessage执行了");
    let curSessionLi = findSessionLi(resp.sessionId);
    if(curSessionLi == null){
        curSessionLi = document.createElement("li");
        curSessionLi.setAttribute("message-session-id",resp.sessionId);
        curSessionLi.innerHTML = "<h3>"+resp.fromName +"</h3>"+"<p></p>";
        curSessionLi.onclick = function (){
            clickSession(curSessionLi);
        }
    }
    let p = curSessionLi.querySelector('p');
    p.innerHTML = resp.content;
    if(p.innerHTML.length>=10){
        p.innerHTML = p.innerHTML.substring(0,10)+"...";
    }

    let sessionUl = document.querySelector("#session-list");
    sessionUl.insertBefore(curSessionLi,sessionUl.children[0]);

    if(curSessionLi.className == "selected"){
        let messageShowDiv = document.querySelector('.right .message-show');
        addMessage(messageShowDiv,resp);
        scrollBottom(messageShowDiv);
    }
}

function findSessionLi(targetSessionId){
    let sessionLis = document.querySelectorAll("#session-list li");
    for(let li of sessionLis){
        let sessionId = li.getAttribute("message-session-id");
        if(sessionId == targetSessionId){
            return li;
        }
    }
    return null;
}

//绑定交换会话与好友按钮
initSwitchTab();
function initSwitchTab(){
    var tabSession = document.querySelector(".tab .tab-session");
    var tabFriend = document.querySelector(".tab .tab-friend");

    var lists = document.querySelectorAll(".list");
    // tabSession.onclick = function (){
    //     tabSession.style.backgroundImage = "url(img/对话.png)";
    //     tabFriend.style.backgroundImage = "url(img/用户2.png)";
    //
    //     lists[0].classList = "list";
    //     lists[1].classList = "list hide";
    // }
    //
    // tabFriend.onclick = function (){
    //     tabSession.style.backgroundImage = "url(img/对话2.png)";
    //     tabFriend.style.backgroundImage = "url(img/用户.png)";
    //
    //     lists[0].classList = "list hide";
    //     lists[1].classList = "list";
    // }

    // tabSession.onclick = function (){
    //     tabSession.style.backgroundImage = "url(img/对话.png)";
    //     tabFriend.style.backgroundImage = "url(img/用户2.png)";
    //
    //     lists[0].classList.remove("hide");
    //     lists[1].classList.add("hide");
    // }
    //
    // tabFriend.onclick = function (){
    //     tabSession.style.backgroundImage = "url(img/对话2.png)";
    //     tabFriend.style.backgroundImage = "url(img/用户.png)";
    //
    //
    //     lists[0].classList.add("hide");
    //     lists[1].classList.remove("hide");
    // }


    tabSession.onclick = function (){
        // 添加激活状态
        tabSession.classList.add('active');
        tabFriend.classList.remove('active');

        // 切换列表显示
        lists[0].classList.remove("hide");
        lists[1].classList.add("hide");
    }

    tabFriend.onclick = function (){
        // 添加激活状态
        tabFriend.classList.add('active');
        tabSession.classList.remove('active');

        // 切换列表显示
        lists[0].classList.add("hide");
        lists[1].classList.remove("hide");
    }

}

getFriendList();
function getFriendList(){
    $.ajax({
        type: "get",
        url: "/friend/getList",
        success: function (lists){
            let friendListUL = document.querySelector("#friend-list");
            friendListUL.innerHTML = "";

            for(let friend of lists){
                let li = document.createElement("li");
                li.innerHTML = '<h4>'+friend.username+'</h4>';
                li.setAttribute("friend-id",friend.id);
                friendListUL.appendChild(li);
                li.onclick = function() {
                    // 参数表示区分了当前用户点击的是哪个好友.
                    clickFriend(friend);
                }
            }
        },
        error: function() {
            console.log('获取好友列表失败!');
        }
    });
}


// 出现bug clickFriend 返回的sessionId可能为多个 原因群聊导致的 待处理
async function clickFriend(friend){
    // 1. 先判定一下当前这个好友是否有对应的会话.
    //    使用一个单独的函数来实现. 这个函数参数是用户的名字. 返回值是一个 li 标签. 找到了就是返回了对应会话列表里的 li; 如果没找到, 返回 null
    try {
        //console.log("1")
        //通过好友id获取session id
        let sessionId = await findSessionIdByUserId(friend.id);
        console.log(sessionId)
        //通过session id获取session li
        let sessionLi = await findSessionLi(sessionId);

        // 后续处理逻辑...
        let sessionListUL = document.querySelector("#session-list");
        if(sessionLi){
            // 2. 如果存在匹配的结果, 就把这个会话设置成选中状态, 获取历史消息, 并且置顶.
            sessionListUL.insertBefore(sessionLi,sessionListUL.children[0]);
            sessionLi.click();
        }else {
            // 3.如果不存在匹配的结果, 就创建个新会话(创建 li 标签 + 通知服务器)
            sessionLi = document.createElement('li');
            //构造 li 标签内容. 由于新会话没有 "最后一条消息", p 标签内容就设为空即可
            sessionLi.innerHTML = '<h3>'+friend.username+'</h3>'+"<p></p>";
            sessionListUL.insertBefore(sessionLi,sessionListUL.children[0]);
            //给session il附上点击事件
            sessionLi.onclick = function (){
                clickSession(sessionLi);
            }
            sessionLi.click();
            //发送消息给服务器, 告诉服务器当前新创建的会话是啥样的.
            createSession(friend.id,sessionLi);
        }
        let tabSession = document.querySelector(".tab .tab-session");
        tabSession.click();
    } catch (error) {
    // 捕获可能的错误（如异步操作失败）
    console.error("处理会话时出错：", error);
    }
}

function findSessionIdByUserId(friendId) {
    // 返回一个 Promise 对象
    return new Promise((resolve, reject) => {
        console.log("2");
        $.ajax({
            type: "post",
            url: "/message_session/getsessionid?friendId=" + friendId,
            success(sessionId) {
                if (sessionId != null) {
                    resolve(sessionId); // 成功时将结果传递出去
                } else {
                    console.log("sessionId 为空");
                    resolve(null); // 明确返回 null
                }
            },
            error(xhr, status, error) {
                // 处理请求失败的情况
                console.error("获取 sessionId 失败：", error);
                reject(error); // 将错误传递出去
            }
        });
    });
}

function findSessionByName(name){
    // 先获取到会话列表中所有的 li 标签
    // 然后依次遍历, 看看这些 li 标签谁的名字和要查找的名字一致.
    let sessionLis = document.querySelectorAll("#session-list>li");
    for(let sessionLi of sessionLis){
        let h3 = sessionLi.querySelector('h3');
        if(h3.innerHTML == name){
            return sessionLi;
        }
    }
    return null;
}

//创建session，传参好友id、session li
function createSession(friendId,sessionLi){
    $.ajax({
        type:"post",
        url:"/message_session/addsession?friendId="+friendId,
        //成功返回值为 创建的session_id
        success:function (sessionId){
            console.log("会话创建成功! sessionId = " + sessionId);
            //给session li 附上session_id属性
            sessionLi.setAttribute("message-session-id",sessionId);
        },
        error:function (){
            console.log("会话创建失败!");
        }
    });
}


//获取session列表
function getMessageSession(){
    $.ajax({
        type:"get",
        url:"message_session/getsessionlist",
        success:function (body){
            // 1. 清空之前的会话列表
            var  sessionListUL = document.querySelector("#session-list");
            sessionListUL.innerHTML = "";
            console.log("[getMessageSession] 执行了")
            // 2. 遍历响应的数组, 针对结果来构造页面
            for(session of body){
                //截断显示的多余消息
                if(session.lastMessage.length > 10){
                    session.lastMessage = session.lastMessage.substring(0,10)+"...";
                }
                var li = document.createElement("li");
                // 把会话 id 保存到 li 标签的自定义属性中.
                li.setAttribute("message-session-id",session.sessionId);
                li.innerHTML = '<h3>'+session.friends[0].username+'</h3>'+
                    '<p>'+session.lastMessage+'</p>';
                sessionListUL.appendChild(li);
                // 给 li 标签新增点击事件
                li.onclick = function (){
                    clickSession(this);
                }
            }
            inithandleAddFriend();
        }
    });
}

getMessageSession();


function clickSession(currentLi){
    // 1. 设置高亮
    var allLis = document.querySelectorAll("#session-list>li");
    activeSession(allLis,currentLi);
    // 2. 获取指定会话的历史消息 TODO
    let sessionId = currentLi.getAttribute("message-session-id");
    getHistoryMessage(sessionId);
}


function activeSession(allLis,currentLi){
    // 这里的循环遍历, 更主要的目的是取消未被选中的 li 标签的 className
    for(var li of allLis){
        if(li == currentLi){
            li.className = 'selected';
        }else {
            li.className = "";
        }
    }
}

//获取历史消息
function getHistoryMessage(sessionId){
    console.log("获取历史消息 sessionId="+sessionId);
    //获取右边部分元素模块，并清空
    let titleDiv = document.querySelector(".right .title");
    titleDiv.innerHTML = "";
    let messageShowDiv = document.querySelector(".right .message-show");
    messageShowDiv.innerHTML = "";
    //获取聊天框中的对象姓名
    let selectedH3 = document.querySelector("#session-list .selected>h3");
    if(selectedH3){
        titleDiv.innerHTML = selectedH3.innerHTML;
    }
    $.ajax({
       type:"get",
       url:"/message/getmessageList?sessionId="+sessionId,
       success:function (messageList){
           for (let message of messageList){
               addMessage(messageShowDiv,message);
           }
           scrollBottom(messageShowDiv);
       }
    });
}

//向消息链表中添加一条消息
function addMessage(messageShowDiv,message){
    //表示一条消息
    let messageDiv = document.createElement("div");
    //获取用户自己姓名
    let selfName = document.querySelector(".left .user").innerHTML;
    if(message.fromName == selfName){
        messageDiv.className = "message message-right";
    }else {
        messageDiv.className = "message message-left";
    }
    //向消息中添加发送者和消息内容
    messageDiv.innerHTML = '<div class="box">'
        + '<h4>' + message.fromName + '</h4>'
        + '<p>' + message.content + '</p>'
        + '</div>';
    messageShowDiv.appendChild(messageDiv);
}

//把 messageShowDiv 里的内容滚动到底部.
function scrollBottom(elem){
    let clientHeight = elem.offsetHeight;
    let scollHeight = elem.scrollHeight;
    elem.scrollTo(0,scollHeight - clientHeight);
}


